<template>
  <view class="big-bc">
    <z-paging :refresher-enabled="false">
      <template #top>
        <u-navbar title="附近门店" :background="{}"></u-navbar>
      </template>

      <content-container>
        <!-- 搜索框 -->
        <view class="search-wrap">
          <uni-search-bar
            class="search"
            v-model="keyword"
            placeholder="请输入门店名称"
            bgColor="#fff"
            clearButton="auto"
            cancelButton="none"
            @confirm="onSearchConfirm"
            @clear="onClear"
          />
        </view>
      </content-container>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
// 选择城市页面
// - 支持搜索过滤
// - 显示当前定位城市与历史访问城市
// - 使用 uni-indexed-list 展示按字母索引的城市列表

import { ref, computed, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { CITY_INDEXED_OPTIONS } from "@/utils/city-data";
// 关键字搜索
const keyword = ref("");

// 原始索引数据
const allOptions = ref(CITY_INDEXED_OPTIONS);

// 过滤逻辑（中文包含判断）
const filteredOptions = computed(() => {
  const k = keyword.value.trim();
  if (!k) return allOptions.value;
  return allOptions.value
    .map((group) => ({
      letter: group.letter,
      data: group.data.filter((name) => name.includes(k)),
    }))
    .filter((group) => group.data.length > 0);
});

// 搜索栏事件
function onSearchConfirm(e: any) {
  // uni-search-bar v-model 已绑定，这里做兜底与键盘收起
  keyword.value = typeof e === "string" ? e : e?.value ?? keyword.value;
  uni.hideKeyboard();
}

function onClear() {
  keyword.value = "";
}
const queryList = () => {};
onMounted(() => {});
</script>

<style lang="less" scoped>
.search-wrap {
  margin-top: 15rpx;
  margin-bottom: 30rpx;
  width: 688rpx;
  height: 77rpx;
  //   background: #f5f5f5;
  border-radius: 69rpx;

  :deep(.uni-searchbar) {
    padding: 0 !important;
  }
  :deep(.uni-searchbar__box) {
    border-radius: 69rpx !important;
    padding: 0 !important;
  }
}
</style>
